<template>
  <div class="page-class">
    <Breadcrumb>
      <!--投票状态  1未发布 2已发布 3已撤回 4已结束 -->
      <a-button type="default" @click="handleEdit" v-if="canEdit"
        >编辑</a-button
      >

      <template v-if="data.voteStatus === 2">
        <!-- 目标户数 !== 参与人数   显示 ‘导出未参与’ -->
        <a-button type="primary" @click="handleExportUnjoin"
          >导出未参与</a-button
        >
        <a-button type="primary" @click="handleSendMsg">短信提醒</a-button>
        <a-button type="default" @click="handleBack">撤回</a-button>
      </template>

      <template v-if="data.voteStatus === 4">
        <!-- 目标户数 !== 参与人数   显示 ‘导出未参与’ -->
        <a-button type="primary" @click="handleExportUnjoin"
          >导出未参与</a-button
        >
        <a-button type="primary" @click="handleStatement">发布声明</a-button>
      </template>

      <a-button type="primary" @click="handlePublish" v-if="canPublish"
        >发布</a-button
      >
    </Breadcrumb>
    <div class="form-cont">
      <div class="card">
        <a-spin tip="Loading..." :spinning="loading">
          <div class="form">
            <header>
              <span class="state" :class="stateSty.class"
                >[{{ stateSty.name }}]</span
              >
              <span>{{ data.subject }}</span>
            </header>
            <template v-if="data.showPicUrl">
              <img class="poster" :src="data.showPicUrl" />
              <a-divider />
            </template>

            <div
              class="rich-text"
              v-if="data.content"
              v-html="data.content"
            ></div>

            <a-row>
              <a-col :span="12">
                <span class="label">推送范围：</span>
                <span class="label text">{{
                  data.sendRange || "虹旭小区-1号楼、2号楼、3号楼"
                }}</span>
              </a-col>

              <a-col :span="6">
                <span class="label">目标户数：</span>
                <span class="label text">50</span>
              </a-col>
              <a-col :span="6">
                <span class="label">已认证：</span>
                <span class="label text">30</span>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="12">
                <span class="label">上限人数：</span>
                <span class="label text">{{ data.maxUserNum || "不限" }}</span>
              </a-col>
              <a-col :span="12">
                <span class="label">创建人：</span>
                <span class="label text">{{
                  data.createrUserName || "--"
                }}</span></a-col
              >
            </a-row>
            <a-row>
              <a-col :span="12">
                <span class="label">创建时间：</span>
                <span class="label text">{{
                  data.createTime || "--"
                }}</span></a-col
              >
              <a-col :span="12">
                <span class="label">截止日期：</span>
                <span class="label text">{{ data.endTime || "--" }}</span>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="12">
                <span class="label">投票类型：</span>
                <span class="label text">{{
                  data.voteUpdateType | voteUpdateType
                }}</span>
              </a-col>
              <a-col :span="12">
                <span class="label">选项类型：</span>
                <span class="text">{{ data.selectType | selectType }}</span>
              </a-col>
            </a-row>

            <a-row v-if="data.voteStatus === 2 || data.voteStatus === 4">
              <a-col :span="12">
                <span class="label">发布人：</span>
                <span class="label text">{{
                  data.operatorUserName || "--"
                }}</span></a-col
              >
              <a-col :span="12">
                <span class="label">发布时间：</span>
                <span class="label text">{{
                  data.upadteTime || "--"
                }}</span></a-col
              >
            </a-row>

            <a-row v-if="data.voteStatus === 3">
              <a-col :span="12">
                <span class="label">撤回人：</span>
                <span class="label text">{{
                  data.operatorUserName || "--"
                }}</span></a-col
              >
              <a-col :span="12">
                <span class="label">撤回时间：</span>
                <span class="label text">{{
                  data.upadteTime || "--"
                }}</span></a-col
              >
            </a-row>
            <a-row>
              <a-col :span="12">
                <span class="label">投票结果：</span>
                <span class="label text">显示</span>
              </a-col>
            </a-row>

            <a-row v-if="data.joinNumber" class="row_join">
              <a-col :span="8">
                <span class="label">参与人数：</span>
                <span class="label text joinNumber"
                  >{{ data.joinNumber }}人</span
                >
              </a-col>
              <a-col :span="8">
                <span class="label">产权总面积：</span>
                <span class="label text joinNumber">88㎡</span>
              </a-col>

              <a-col :span="6">
                <a-button type="link" @click="downList"
                  >下载投票人员清单</a-button
                >
              </a-col>
            </a-row>

            <ul>
              <li v-for="(node, index) in data.voteOptionList" :key="index">
                <div class="row_">
                  <span class="list-label">选项{{ index + 1 }}：</span>
                  <span class="list-content">{{ node.optionContent }}</span>
                </div>
                <div class="row_" v-if="data.joinNumber">
                  <div class="row_node">
                    <span class="number"
                      >投票数：{{ node.optionSumNo || 0 }}人</span
                    >
                    <span class="rate"
                      >占比：{{ node.optionPercent || 0 }}%</span
                    >
                  </div>
                  <div class="row_node">
                    <span class="number"
                      >产权面积：{{ node.optionSumNo || 0 }}㎡</span
                    >
                    <span class="rate"
                      >面积占比：{{ node.optionPercent || 0 }}%</span
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </a-spin>
      </div>
    </div>
  </div>
</template>
<script>
import httpApi from "@/api/vote";
import { stateList, selectList, voteUpdateType, downloadFile } from "@/utils";

export default {
  data() {
    return {
      loading: false,
      data: {}
    };
  },
  computed: {
    stateSty() {
      //投票状态1未发布 2已发布 3已撤回 4已结束
      if (this.data.voteStatus === "") return;
      let node =
        stateList.find((node) => node.value === this.data.voteStatus) || {};
      return {
        class: `state-${node.alias}`,
        name: node.name
      };
    },
    canEdit() {
      // 投票状态  1未发布 2已发布 3已撤回 4已结束
      // 无人参与投票，撤回后可编辑重新发布。有人参与投票，撤回后仅支持查看
      if (this.data.voteStatus === 4) {
        return false;
      }
      if (this.data.voteStatus === 3) {
        return !this.data.joinNumber;
      } else if (this.data.voteStatus === 2) {
        // 已发布不能编辑
        return false;
      } else {
        return true;
      }
    },
    canPublish() {
      if (this.data.voteStatus === 4) {
        return false;
      }
      return (
        this.data.voteStatus === 1 ||
        (this.data.voteStatus === 3 && !this.data.joinNumber)
      );
    }
  },
  filters: {
    selectType(val) {
      if (val === "") return "--";
      let node = selectList.find((node) => node.value === val) || {};
      return node.name || "--";
    },
    voteUpdateType(val) {
      if (val === "") return "--";
      let node = voteUpdateType.find((node) => node.value === val) || {};
      return node.name || "--";
    }
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.loading = true;
      httpApi
        .getDetail({
          strId: this.$route.query.id
        })
        .then((res) => {
          this.loading = false;
          if (res.retcode === 0) {
            let data = res.data || {};
            if (data.joinNumber) {
              this.getVoteState(data); //聚合统计数据
            } else {
              let list = data.voteOptionList || [];
              // 排序
              list.sort((a, b) => {
                return a.sort - b.sort;
              });
              this.data = data;
            }
          } else {
            this.data = {};
          }
        })
        .catch((err) => {
          this.loading = false;
          this.data = {};
          this.$message.error(err.msg);
        });
    },
    getVoteState(data) {
      httpApi
        .getVoteState({
          strId: this.$route.query.id
        })
        .then((res) => {
          if (res.retcode === 0) {
            let voteOptionList = res.data.list || [];
            let list = data.voteOptionList || [];
            list.forEach((item) => {
              voteOptionList.forEach((node) => {
                if (item.id === node.optionId) {
                  item.optionPercent = node.optionPercent;
                  item.optionSumNo = node.optionSumNo;
                }
              });
            });
            // 排序
            list.sort((a, b) => {
              return a.sort - b.sort;
            });
            this.data = data;
          } else {
            this.data = {};
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    downList() {
      this.loading = true;
      httpApi
        .exportFile({
          strId: this.$route.query.id
        })
        .then((res) => {
          this.loading = false;
          downloadFile(`voteInfo_vote_${this.$route.query.id}.xlsx`, res.data);
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.msg);
        });
    },
    handleEdit() {
      this.$router.push({
        path: "/vote/edit",
        query: {
          id: this.$route.query.id,
          type: "2" //编辑
        }
      });
    },
    handleBack() {
      //撤回
      this.$confirm({
        title: "撤回",
        content: () => (
          <div>
            <div class="pwd-msg">是否立即撤回投票活动？</div>
            <span class="pwd-tip">
              无人参与投票，撤回后可编辑重新发布。有人参与投票，撤回后仅支持查看
            </span>
          </div>
        ),
        onOk: () => {
          httpApi
            .updateStatus({
              voteContentId: this.$route.query.id,
              status: 3
            })
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("撤回成功！");
                this.getDetail();
              } else {
                this.$message.error("撤回失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "撤回失败！");
            });
        },
        onCancel: () => {}
      });
    },
    handleExportUnjoin() {
      // 导出未参与
    },
    handleSendMsg() {
      // 短信提醒
    },
    handleStatement(row) {
      //发布声明
      console.log(row);
    },
    handlePublish() {
      // 发布
      this.$confirm({
        title: "发布",
        content: () => <div class="pwd-msg">是否立即发布投票活动？</div>,
        onOk: () => {
          httpApi
            .updateStatus({
              voteContentId: this.$route.query.id,
              status: 2
            })
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("发布成功！");
                this.getDetail();
              } else {
                this.$message.error("发布失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "发布失败！");
            });
        },
        onCancel: () => {}
      });
    }
  }
};
</script>

<style lang="less" scoped>
.pwd-msg {
  .font-Medium(14px,rgba(0, 0, 0, 0.65),22px,400);
}
.pwd-tip {
  display: inline-block;
  margin-top: 10px;
  .font-Medium(12px, #f5222d, 18px, 400);
}
.form-cont {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
  .card {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #ffff;
    border-radius: 8px;
    padding: 20px 44px;
    .form {
      width: 800px;
      margin-left: 28px;
      header {
        width: 100%;
        line-height: 80px;
        span {
          height: 28px;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: rgba(0, 0, 0, 1);
          line-height: 28px;
          color: rgba(0, 0, 0, 0.85);
        }
        .state {
          color: rgba(0, 0, 0, 0.65);
          margin-right: 6px;
        }
      }

      .poster {
        width: 100%;
        height: 354px;
      }

      .ant-row {
        line-height: 38px;
        .label {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
        }

        .text {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
        }
        .joinNumber {
          font-size: 18px;
          color: @primary-color;
        }
      }
      .row_join {
        margin-top: 32px;
      }

      ul {
        list-style: none;
        padding: 20px 0 32px 32px;
        li {
          .row_ {
            display: flex;
            align-items: center;
            line-height: 40px;
            margin-bottom: 10px;
            .row_node {
              flex: 1;
            }
            .list-label {
              width: 54px;
            }
            .list-content {
              flex: 1;
              padding: 0 10px;
              background: rgba(0, 0, 0, 0.05);
              border-radius: 4px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
            }
            .number {
              margin-left: 54px;
            }
            .rate {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
